<!--
 * @Descripttion: 文件说明
 * @version: 0.0.1
 * @Author: zhangmeng
 * @Date: 2022-08-21 12:08:39
 * @LastEditors: zhangmeng
 * @LastEditTime: 2022-08-22 08:26:27
-->
<template>
	<div class="component-list">
		<div v-for="(item, index) in componentList" :key="index" class="component-item" draggable
			@dragstart="(e) => handleDragStart(e, item)">		
			<div class="component-item-title">{{ item.title }}</div>
		</div>
	</div>
</template>

<script>
	import {
		GetBasicsList
	} from "@/library/components";
	export default {
		data() {
			return {
				componentList: GetBasicsList(),
			}
		},
		methods: {
			handleDragStart(e, data) {
				this.$emit('dragStart', {
					item: data,
					offset: {
						dropX: e.offsetX,
						dropY: e.offsetX
					}
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.component-list {
		width: 100%;
		height: 100%;
		padding: 8px;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 6px;
		grid-template-rows: 70px;

		.component-item {
			width: 100%;
			height: 70px;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-around;
			background: rgb(247, 247, 247);
			color: rgb(102, 102, 102);
			border-radius: 4px;
			cursor: pointer;

			&:active {
				cursor: grabbing;
			}
		}

		.component-item-title {
			width: 100%;
			height: 20px;
			text-align: center;
			color: rgb(102, 102, 102);
		}
	}

</style>
